import React, { PureComponent } from 'react';
import { Input, Typography } from 'antd';
import { withRemove } from './index';
import styles from './index.less';

const { Text } = Typography;

@withRemove
class TextComponent extends PureComponent {
  state = {
    isEdit: false,
    content: this.props.data.content,
  };

  handleChange = e => {
    const { value } = e.target;
    const { data } = { ...this.props };
    data.content = value;
    this.props.onChange(data);
    this.setState({ content: value });
  };

  setEditStatus = isEdit => () => this.setState({ isEdit });

  render() {
    const { isEdit, content } = this.state;
    return isEdit ? (
      <Input.TextArea
        autoFocus
        rows={5}
        placeholder="这里编辑文本信息"
        value={content}
        onChange={this.handleChange}
        onBlur={this.setEditStatus(false)}
      />
    ) : (
      <Typography onClick={this.setEditStatus(true)} className={styles.wordWrap}>
        <Text type={content ? null : 'secondary'}>{content || '这里编辑文本信息'}</Text>
      </Typography>
    );
  }
}

export default TextComponent;
